<template>
  <div>
    <el-table
      :cell-style="{ padding: '6px' }"
      :data="state.cavityInvList"
      highlight-current-row
      :row-style="{ fontSize: '8px' }"
      @row-click="invRowClick"
    >
      <el-table-column
        label="物料编码"
        min-width="150"
        prop="invcode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料名称"
        min-width="150"
        prop="invname"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料规格"
        min-width="150"
        prop="invspec"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料类型"
        prop="invtype"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="装箱标记"
        prop="pickBoxFlag"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <el-pagination
      background
      :current-page="state.paginationParams.pageNum"
      :layout="layout"
      :page-size="state.paginationParams.pageSize"
      :total="state.paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
  </div>
</template>
<script setup>
  import { getInvByCavityApi } from '@/api/equip/mold_api.ts'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const _props = defineProps({
    pkCavity: {
      type: String,
      default: '',
    },
  })
  const state = reactive({
    cavityInvList: [],
    paginationParams: {
      pageNum: 1,
      pageSize: 20,
      total: 0,
    },
  })

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    state.paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    state.paginationParams.pageSize = args[0] ? args[0] : 20
    state.paginationParams.pageNum = 1
  }
  //#endregion pagintion 结束

  watch(
    () => state.paginationParams,
    () => queryInvCavityList()
  )
  watch(
    () => _props.pkCavity,
    () => {
      refreshInvCavityList()
    }
  )

  const queryInvCavityList = async () => {
    const { data } = await getInvByCavityApi({
      pkCorp,
      pkCavity: _props.pkCavity,
      pageNum: state.paginationParams.pageNum,
      pageSize: state.paginationParams.pageSize,
    })
    state.paginationParams.total = data.total
    state.cavityInvList = data.list
  }
  const refreshInvCavityList = () => {
    state.paginationParams.pageNum = 1
    state.paginationParams.total = 0
    queryInvCavityList()
  }
  const invRowClick = (row) => {
    _emits('inv-select', row)
  }
  defineExpose({
    queryInvCavityList,
    refreshInvCavityList,
  })
  const _emits = defineEmits(['inv-select'])
</script>
<style lang="scss" scoped></style>
